<template>
    <div class="comments-container">
        <!-- 顶部区域 -->
        <div class="top">

            <!-- 返回按钮 -->
            <div class="back" @click="$router.go(-1)">
                < </div>
                    <!-- 写评论按钮 -->
                    <div class="write" @click="write()">写评论</div>
            </div>
            <!-- 评论内容区域 -->
            <div class="comments-content">
                <!-- 评论列表 -->
                <div class="comments-list">
                    <CommentItem v-for="comment,index in comments" :key="index" :comment="comment" @add-reply="addReply"
                        @LikeComment="LikeComment"  />
                         
                </div>
            </div>
            <!-- 输入框区域 -->
            <div class="input" v-if="isInput">
                <!-- 输入框 -->
                <input class="allinput" type="text" v-model="content" placeholder="回复">
                <!-- 发送按钮 -->
                <el-button @click="contentSend()">发送</el-button>
                <!-- 评分 -->
                <el-rate v-model="value2" :colors="colors">
                </el-rate>
            </div>
        </div>
</template>

<script>

import { getComments, recodeComments, addComments, praiseComments } from '../../api/system/comments';
import CommentItem from '../../layout/components/comment-item.vue';
import Cookies from 'js-cookie';
export default {
    components: {
    CommentItem,
  },
    data() {
        return {
            newComment: '',
            nextId: 1,
            base_url: process.env.VUE_APP_BASE_API,
            comments: [],
            query: {
                pageNum: 1,
                pageSize: 10,
                attractionId: null
            },
            text: '',
            is: null,
            isInput: false,
            value2: null,
            content: '', defaultProps: {
                children: 'children',
                label: 'label'
            },
            colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        }
    },
    methods: {
        LikeComment({commentId}){
            praiseComments({ commentId, userId: Number(Cookies.get('Id')) }).then(res => {
                this.$modal.msgSuccess("操作成功");
            })
        },
    addReply({ parentId, content }) {
        recodeComments({ attractionId: this.$route.query.id, parentId: parentId, content: content, userId: Number(Cookies.get('Id')) }).then(res => {
                this.getComments()
                this.$modal.msgSuccess("评论成功");
            })
    },

        // 发送评论
        contentSend() {
            addComments({ attractionId: this.$route.query.id, content: this.content, rating: this.value2, userId: Number(Cookies.get('Id')) }).then(res => {
                console.log(res);
                this.isInput = false

                this.getComments()
                this.$modal.msgSuccess("评论成功");

            })
        },
        // 写评论
        write() {
            this.isInput = true
            this.is = null

        },
        // 获取评论列表
        getComments() {
            getComments(this.query.attractionId).then(res => {
                console.log(res);
                this.comments = res.data
            })
        },

    },
    created() {
        this.query.attractionId = this.$route.query.id;
        console.log(this.query.attractionId);
        this.getComments()

    }

}

</script>

<style lang='scss'>
.comments-container {
    width: 100%;
    // height: 100%;
    // background-color: #F8F8F8;
    border-radius: 10px;
    // overflow: hidden;
    position: relative;

    .input {
        position: absolute;
        bottom: -100px;
        width: 100%;
        // height: 30px;
        padding: 50px 50px 0;
        box-sizing: border-box;

        .allinput {
            width: 80%;
            height: 100%;
            outline: none;
            margin-right: 10px;
        }
    }

    .top {
        background-color: #F8F8F8;
        height: 50px;
        width: 100%;
        display: flex;
        align-items: center;
        border-radius: 10px 10px 0 0;
        justify-content: space-between;

        .write {
            margin-right: 50px;
            padding: 5px;
            background-color: rgb(44, 150, 199);
            box-sizing: border-box;
            border-radius: 10px;
            color: white;

            &:hover {
                cursor: pointer;
                background-color: rgb(36, 130, 180);

            }
        }

        .back {
            font-size: 30px;
            margin-left: 20px;

            &:hover {
                cursor: pointer;
                color: rgb(203, 141, 141);
            }
        }
    }

    .comments-content {
        width: 1200px;
        margin: auto;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .comments-list{
            width: 100%;
            max-height:700px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

    }
}
</style>